<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="${ctx!}/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx!}/static/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx!}/static/css/app.css" rel="stylesheet">
    <title>区块链监控平台</title>
</head>

<body>

<div class="wrapper">
    <nav role="navigation" class="navbar navbar-default">
        <!-- START navbar header-->
        <div class="navbar-header">
            <a href="/" class="navbar-brand">
                <div class="brand-logo">
                    <img src="/static/image/logo.png" alt="App Logo" class="img-responsive">
                </div>
            </a>
        </div>
        <!-- END navbar header-->
        <!-- START Nav wrapper-->
        <div class="nav-wrapper">
            <ul class="nav navbar-nav">
                <li>
                    <!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
                    <a href="/" class="hidden-xs active">
                        区块链数据
                    </a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <!-- Search icon-->
                <li>
                    <a href="javascript:void(0);" data-toggle="navbar-search">
                        15510165330@163.com
                        <em class="fa fa-caret-down"></em>
                    </a>
                </li>
            </ul>

        </div>
        <!-- END Nav wrapper-->
    </nav>
    <div class="container-fluid main-content">
        <H3>区块链数据</H3>
        <div class="row" style="margin-bottom: 10px;">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">最新生成的区块
                        <a href="${ctx!}/chain/overview" class="pull-right">
                            查看更多 <em class="fa fa-arrow-right"></em>
                        </a>
                    </div>
                    <div class="panel-body">
                        <div class="dataTables_wrapper form-inline no-footer">
                            <table class="table table-striped table-hover dataTable no-footer">
                                <thead>
                                <tr>
                                    <th>区块高度</th>
                                    <th>生成时间</th>
                                    <th>区块内文档个数</th>
                                    <th>存证类型个数</th>
                                    <th>存证个数</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <#list blockOverviewInfoList?sort_by("height")?reverse as blockOverviewInfo>
                                <tr>
                                    <td>${blockOverviewInfo.height}</td>
                                    <td>${(blockOverviewInfo.timestamp*1000) ?number_to_date?string("yyyy-MM-dd HH:mm:ss")}</td>
                                    <td>${blockOverviewInfo.txCount}</td>
                                    <td>${blockOverviewInfo.recordTypeCount}</td>
                                    <td>${blockOverviewInfo.recordCount}</td>
                                    <td><a href="/chain/overview?height=${blockOverviewInfo.height}">详情</a></td>
                                </tr>
                                </#list>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">最新产生的交易
                    </div>
                    <div class="panel-body">
                        <div class="dataTables_wrapper form-inline no-footer">
                            <table class="table table-striped table-hover dataTable no-footer">
                                <thead>
                                <tr>
                                    <th>存档类型</th>
                                    <th>生成时间</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <#list transactionInfoList?sort_by("time")?reverse as transactionInfo>
                                <tr>
                                    <td>${(transactionInfo.contentType=="RECORD")?string("存证","存证类型")}</td>
                                    <td>${(transactionInfo.time*1000) ?number_to_date?string("yyyy-MM-dd HH:mm:ss")}</td>
                                    <td><a href="/tx?hash=${transactionInfo.uuid}">详情</a></td>
                                </tr>
                                </#list>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">业务数据查询
                    </div>
                    <div class="panel-body">
                        <form action="/tx/record">
                            <div class="form-group">
                                <input type="text" placeholder="通过疫苗ID查找流通数据" class="form-control mb" name="vaccineId">
                                <div class="clearfix">
                                    <button type="submit" class="pull-left btn btn-default" id="search">查找</button>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


<!-- 全局js -->
<script src="${ctx!}/static/js/jquery.min.js"></script>
<script src="${ctx!}/static/js/bootstrap.min.js"></script>
<script src="${ctx!}/static/js/index.js"></script>
</body>

</html>
